<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="Mycanvas" width="800" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = "yellow";
			ctx.fillRect(0, 0, 800, 500);
			var arcx=50;
			var arcy=50;
			var arcR=45;
			var l1=5;
			var t1=5;
			
			var arc2x=20;
			var arc2y=20;
			var arc2R=10;
			var l2=10;
			var t2=5;
			
			setInterval(function(){
				ctx.fillStyle="rgba(0,255,0,0.2)";
				ctx.fillRect(0,0,800,500);
				ctx.beginPath();
				ctx.fillStyle="#000000";
				ctx.arc(arcx,arcy,arcR,0,2*Math.PI);
				ctx.fill();
				arcx=arcx+l1;
				arcy=arcy+t1;
				
				if(arcy>500-arcR||arcy<arcR){
					t1=-t1;
				}
				if(arcx>800-arcR||arcx<arcR){
					l1=-l1;
				}
				
				ctx.beginPath();
				ctx.fillStyle="red";
				ctx.arc(arc2x,arc2y,arc2R,0,2*Math.PI);
				ctx.fill();
				arc2x=arc2x+l2;
				arc2y=arc2y+t2;
				
				if(arc2y>500-arc2R||arc2y<arc2R){
					t2=-t2;
				}
				if(arc2x>800-arc2R||arc2x<arc2R){
					l2=-l2;
				}
			},20)
		</script>

	</body>

</html>